<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="captainln-box">
		<view class="captainln-from flex">
			<text class="title">信息填写</text>
			<!-- 提交状态 -->
			<view class="status-box flex" v-if="submitStatus&&submitStatus.status!=0">
				<view class="name-box flex-row-center" v-if="submitStatus.status==1">
					<up-icon name="clock" color="#F9AE3D" size="28rpx"></up-icon>
					<text class="name ing">入驻正在审核中</text>
				</view>
				<view class="name-box flex-row-center" v-else-if="submitStatus.status==2">
					<up-icon name="checkmark-circle" color="#5AC725" size="28rpx"></up-icon>
					<text class="name sucss">入驻审核通过</text>
				</view>
				<template v-else>
					<view class="name-box flex-row-center">
						<up-icon name="close-circle" color="#F56C6C" size="28rpx"></up-icon>
						<text class="name err">审核未通过！</text>
					</view>
					<text class="reason">原因：{{submitStatus.reviewer_reason}}</text>
				</template>
			</view>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">姓名</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入内容" v-model="captainInfo.name"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">身份证号</text>
					<up-input maxlength="18" border="none" type='idcard' placeholderClass="placeholderClass"
						fontSize="26rpx" color="#DEDEDE" placeholder="请输入内容" v-model="captainInfo.idcard"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name flex-start">简介</text>
					<!--  -->
					<up-textarea border="none" placeholderClass="placeholderClass" v-model="captainInfo.introduce"
						class="" placeholder="请输入内容" count></up-textarea>
				</view>
			</view>
			<!-- 提交 -->
			<view class="submit-box flex-center">
				<!-- disabled="submitStatus&&submitStatus.status==1" -->
				<up-button v-if="submitStatus&&submitStatus.status==1" :disabled="true"
					:customStyle="{'color':'#186059','height':'84rpx'}" text="正在审核" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				<up-button v-else-if="submitStatus&&submitStatus.status==2" @click="toCaptain"
					:customStyle="{'color':'#186059','height':'84rpx'}" text="前往队长中心" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				<up-button v-else :customStyle="{'color':'#186059','height':'84rpx'}" @click="submitCaptain"
					text="立即提交入驻" loadingText="提交中" :loading="loadingState" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	const userStore = userInfoStore();
	const rules = {
		name: {
			required: true,
			msg: '请输入姓名'
		},
		idcard: {
			required: true,
			len: 18,
			// reg: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
			msg: '请输入正确的身份证号码'
		},
	};
	const loadingState = ref(false);
	const submitStatus = ref(null);
	const fileData = reactive({
		fileList1: [],
		fileList2: []
	})
	const captainInfo = ref({
		name: '',
		idcard: '',
		introduce: ''
	});
	onLoad(() => {
		getApplyInfo();
	})
	const toCaptain = () => {
		userStore.getUserInfo();
		uni.redirectTo({
			url: '/page_user/views/captainCenter'
		})
	}
	const getApplyInfo = async () => { //获取队长入驻信息
		uni.showLoading({
			title: '加载中'
		})
		const res = await $Api.user.getApplyInfo();
		console.log('getApplyInfo', res);
		if (res.code == '1') {
			submitStatus.value = res.data;
			setTimeout(() => {
				uni.hideLoading();
			}, 600)
		} else {
			uni.hideLoading();
			uni.$u.toast(res.msg)
		}
	}

	const submitCaptain = async () => { //提交队长资料
		if (loadingState.value) return
		const validate = validateForm(captainInfo.value, rules); //验证
		if (!validate.status) return

		loadingState.value = true;
		const res = await $Api.user.postCaptain(captainInfo.value);
		if (res.code == '1') {
			uni.showToast({
				title: '提交成功'
			})
			userStore.getUserInfo()
			setTimeout(() => {
				loadingState.value = false;
				uni.navigateBack();
			}, 600)
		} else {
			loadingState.value = false;
			uni.$u.toast(res.msg);
		}
	}
</script>
<style lang="scss" scoped>
	.flex-start {
		align-self: flex-start;
	}

	.captainln-box {
		padding: 40rpx 32rpx;
		box-sizing: border-box;

		.captainln-from {
			width: 100%;
			box-sizing: border-box;
			width: 678rpx;
			// height: 856rpx;	
			border: 2rpx solid #3E6764;
			border-radius: 24rpx;
			padding: 26rpx 32rpx;
			flex-direction: column;
			align-items: center;

			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #E2E4E4;
			}


		}
	}

	.status-box {
		width: 100%;
		flex-direction: column;
		margin-top: 24rpx;

		.name {
			margin-left: 12rpx;
			color: #E2E4E4;
			font-size: 30rpx;
		}

		.err {
			color: #F56C6C;
		}

		.sucss {
			color: #5AC725;
		}

		.ing {
			color: #F9AE3D;
		}

		.reason {
			font-size: 28rpx;
			color: #E2E4E4;
			margin-top: 12rpx;
		}
	}

	.from-box {
		margin-top: 20rpx;
		width: 100%;

		.from-item {
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			background: #283B3C;
			border-radius: 12rpx;
			padding: 24rpx 40rpx;
			margin-top: 16rpx;

			.from-name {
				display: block;
				width: 102rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				// text-align: right;
				margin-right: 38rpx;
			}

			.upload-item {
				flex-direction: column;

				.name {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}

			.up-textarea-box {
				color: #fff;
			}

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

		}

	}

	.submit-box {
		width: 336rpx;
		margin-top: 48rpx;
	}
</style>
<style>
	.u-textarea__count,
	.u-textarea.data-v-b6c174a6 {
		padding: 0 !important;
		background-color: transparent !important;
	}

	textarea {
		color: #DEDEDE !important;
		/* 将字体颜色修改为深灰色 */
	}
</style>